<template>
    <div class="write-remark">
        <div class="box">
            <nut-form>
                <nut-form-item label="举报订单">
                    <nut-input v-model="orderNo" class="nut-input-text" placeholder="请输入对应订单号(选填)" type="text" />
                </nut-form-item>
            </nut-form>
        </div>
        <div class="box">
            <div class="title flex-a"><span>*</span><span>请选择举报原因</span></div>
            <nut-radio-group v-model="type" class="radio-list">
                <div><span>友伴照片或姓名与本人不一致</span><nut-radio label="1"></nut-radio></div>
                <div><span>实际服务与描述有较大差距</span><nut-radio label="2"></nut-radio></div>
                <div><span>向客户素要小费</span><nut-radio label="3"></nut-radio></div>
                <div><span>推荐基它APP或者公众号</span><nut-radio label="4"></nut-radio></div>
                <div><span>要求绕开平台线下付款</span><nut-radio label="5"></nut-radio></div>
                <div><span>涉及色情服务或推荐其他人提供色情服务</span><nut-radio label="6"></nut-radio></div>
                <div><span>偷盗(根据严重情况而定)</span><nut-radio label="7"></nut-radio></div>
                <div><span>友伴提前点开始服务</span><nut-radio label="8"></nut-radio></div>
                <div><span>其它原因</span><nut-radio label="9"></nut-radio></div>
            </nut-radio-group>
        </div>
        <div class="box">
            <nut-textarea placeholder="请输入您的反馈，我们们将不断为您改进，已经核实将尽快联系您--" type="text" rows="6" v-model="content" />
            <div class="save-remark">
                <nut-button shape="square" type="info" @click="saveRemark">保存</nut-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Left } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { addReportInfor } from '../../../../api/index';
export default {
    components: {
        Left,
    },
    setup() {
        const data = reactive({
            content: '',
            orderNo: '',
            type: '',
        });
        const saveRemark = () => {
            addReportInfor({ report_Content: data.content, report_Type: data.type, report_order_no: data.orderNo }).then(res => {
                if (res.code == 0) {
                    Taro.showToast({
                        title: '提交成功！',
                        icon: 'success',
                        duration: 2000
                    })
                    setTimeout(() => {
                        jumpTo('/packageA/pages/mypage/index')
                    }, 500)
                }
            })
        }
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {

                }
            })
        });
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        return {
            ...toRefs(data), saveRemark, jumpTo
        }
    }
};
</script>


<style lang="scss">
.write-remark {
    background: #F5F5F5;

    head {
        background: #fff;
    }

    .nut-cell {
        .nut-cell {
            padding: 0;
        }
    }

    .box {
        width: 94%;
        margin: 0 auto 20rpx;
        background: #fff;
        border-radius: 10rpx;

        .title {
            font-size: 26rpx;
            text-align: left;
            box-sizing: border-box;
            padding: 20rpx;
        }

        .nut-cell-group__wrap {
            box-shadow: none !important;
        }

        .radio-list {
            width: 100%;
            box-sizing: border-box;
            padding: 0 20rpx;

            div {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                white-space: nowrap;
                font-size: 24rpx;
                margin-bottom: 15rpx;
                padding-bottom: 15rpx;
                border-bottom: 1rpx dotted #F6F6F6;
            }
        }
    }
}

.save-remark {
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    width: 100%;
    text-align: center;

    .nut-button {
        width: 400rpx;
        margin: 0 auto;
        border-radius: 10rpx;
    }
}
</style>